<template>
  <div class="login-wrap clearfix">
    <div class="login-content clearfix" :style="{visibility:isPageShow?'visible':'hidden'}">
      <div id="my-lottie"></div>
      <div class="login">
        <h2>WELCOME</h2>
        <h3>欢迎使用</h3>
        <h4>学科网设计分中心AI系统</h4>
        <input type="password" autocomplete="new-password" style="position: absolute; top: -999px;" />
        <div class="account">
          <input v-model="username" type="text" required autocomplete="off" />
          <span class="bar"></span>
          <label>账号</label>
        </div>
        <div class="password">
          <input v-model="password" type="password" required autocomplete="off" @keyup.13="login" />
          <span class="bar"></span>
          <label>密码</label>
        </div>

        <div class="remember">
          <div class="remember-choose">
            <a-checkbox class="checkbox" @change="onChange">30天内自动登录</a-checkbox>

          </div>
          <!-- <a href class="forget">忘记密码？</a> -->
        </div>
        <div class="field mt10 sm-text error-tips">{{ errorMsg }}</div>
        <input type="button" class="btn" value="登录" @click="login" />
        <p>北京凤凰学易科技有限公司</p>
      </div>
    </div>
  </div>
</template>

<script>
import cookie from 'js-cookie'
import lottie from 'lottie-web'
import api from '~/assets/js/common/api'
import util from '~/assets/js/common/util'
import constants from '~/assets/js/common/constants'
export default {
  layout: 'login',
  components: {
    // Earth
  },
  data() {
    return {
      checked:false,
      username: '',
      password: '',
      errorMsg: '',
      // 页面整体显示
      isPageShow: false,
    }
  },

  async asyncData({ app }) {
    let { data } = await app.$axios.get('/login-lottie.json')
    return {
      lottieJson: data
    }
  },
  mounted() {
    
    this.buildLottie();
    setTimeout(() => {
      this.isPageShow = true
    }, 0);
  },
  methods: {
    // 动画lottie
    buildLottie() {
      lottie.loadAnimation({
        container: document.getElementById('my-lottie'), // the dom element that will contain the animation
        renderer: 'canvas',
        loop: true,
        autoplay: true,
        animationData: this.lottieJson
        // path: '/login-lottie.json' // the path to the animation json
      })
    },
    async login() {
      const self = this;
      const { data } = await this.$axios.post(api.user.login, {
        username: this.username,
        password: this.password
      })
      if (data.state === 0) {
        // 判断是否选中记住密码
        if (self.checked) {
           cookie.set('uid', data.uid, { expires: 30 });
        } else{
          cookie.remove('uid');
        }
         // 登录成功，记录登录信息
        localStorage.setItem(constants.user.usernameKey, data.user.displayName)
        localStorage.setItem(constants.user.useridKey, data.user.id)
        this.$store.commit('user/SET_USER', data.user)
        // 查看是否有from字段
        let from = util.getQueryString('from') || '/'

        window.location.href = from
        // this.$router.push('/')
      } else {
        this.errorMsg = data.msg
      }
    },
    onChange (e) {
       this.checked = e.target.checked;
    },
    async getUserInfo() {
      const { data } = await this.$axios.post(api.user.info)
      this.errorMsg = data
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~/assets/scss/common.scss');
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

#my-lottie {
  width: 750px;
  height: 560px;
  float: left;
  padding: 0 24px 0 35px;
}
.login-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  background: url('/img/login-bg.jpg') center top no-repeat;
  background-size: cover;
  &.bg-color {
    background-color: #52c41a;
  }
  .login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 200;
    transform: translate(-50%, -50%);
    background: #f2f5fe;
    border-radius: 8px;
    height: 560px;
    width: 1140px;
    box-shadow: 0px 3px 5px 0px rgba(99, 132, 251, 0.2);
  }
  .login {
    float: left;
    background: #fff;
    width: 390px;
    height: 560px;
    border-radius: 0 8px 8px 0;
    padding: 50px 40px 30px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    h2,
    h3,
    h4 {
      font-weight: bold;
      text-align: left;
    }
    h3,
    h4 {
      line-height: 34px;
    }
    h2 {
      font-size: 50px;
      color: #f1f3ff;
      line-height: 50px;
    }
    h3 {
      font-size: 26px;
      color: #6384fb;
    }
    h4 {
      font-size: 20px;
      color: #555;
      margin-bottom: 30px;
    }
    .account,
    .password {
      position: relative;
      input {
        width: 100%;
        height: 35px;
        outline: none;
        border-bottom: 1px solid rgba($color: #d6d8e6, $alpha: 0.4);
        padding-left: 5px;
        box-sizing: border-box;
        margin-bottom: 3.7vh;
        background: rgba($color: #fff, $alpha: 0.1);
        font-size: 14px;
        color: #6384fb;
      }
      label {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 5px;
        color: #8e91a0;
        height: 30px;
        line-height: 30px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
      }

      input:focus ~ label,
      input:valid ~ label {
        top: -20px;
        color: #ccc;
        font-size: 12px;
      }
      input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #ffffff inset !important;
      }
      .bar {
        position: relative;
        display: block;
        width: 100%;
      }
      .bar:before,
      .bar:after {
        content: '';
        height: 1px;
        width: 0;
        bottom: 3.7vh;
        position: absolute;
        background: #6384fb;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
      }
      .bar:before {
        left: 50%;
      }
      .bar:after {
        right: 50%;
      }

      input:focus ~ .bar:before,
      input:focus ~ .bar:after {
        width: 50%;
      }
    }

    .btn {
      width: 70%;
      height: 42px;
      border-radius: 4px;
      line-height: 41px;
      font-size: 18px;
      font-weight: bold;
      padding-left: 0;
      text-align: center;
      color: #fff;
      transition: all 0.3s linear;
      background: rgba($color: #6384fb, $alpha: 1);
      box-shadow: 0px 2px 3px 0px rgba(99, 132, 251, 0.2);
      &:hover {
        background: rgba($color: #486ffb, $alpha: 1);
        color: #fff;
      }
    }
    .remember {
      width: 100%;
      height: 48px;
      margin-bottom: 2.78vh;
      &::after {
        content: '';
        display: block;
        height: 0;
        clear: both;
      }
      .remember-choose {
        float: left;
        line-height: 48px;
        text-align: left;
        padding-left: 5px;
        .checkbox {
          color: #6384fb;
        }
      }
      .forget {
        float: right;
        line-height: 48px;
        text-align: right;
        color: rgb(177, 150, 212);
        &:hover {
          color: #fff;
        }
      }
    }
    .field {
      color: #999;
    }
  }
  p {
    color: #a0a0a0;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin-top: 65px;
    &:before,
    &:after {
      content: '';
      width: 86px;
      height: 1px;
      background: #d3d3d3;
      position: absolute;
      top: 11px;
    }
    &:before {
      left: 20px;
    }
    &:after {
      right: 20px;
    }
  }
}
</style>
